import React, { ReactNode, useEffect, useState } from 'react'
import logo from '../../asset/logo.svg'
import styles from './App.module.css'
import { Layout, Typography, Input, Dropdown, Menu, Button, Space } from 'antd'
import {
  UserOutlined,
  EditOutlined,
  GlobalOutlined,
  DownOutlined,
} from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'
import store from '../../redux/store'
import { languageState } from '../../redux/language/languageReducer'
import { useTranslation } from 'react-i18next'
import {
  addLanguageActionCreator,
  changeLanguageActionCreator,
} from '../../redux/language/languageActions'
//hooks,获得store里面的state数据
import { useSelector } from 'react-redux'
//hooks,action通过这个hooks派遣
import { useDispatch } from 'react-redux'

import { userSlice } from '../../redux/user/slice'

// interface State extends languageState {}

export const Header: React.FC = () => {
  const navigate = useNavigate()
  const { t } = useTranslation()
  // const storeState = store.getState()
  // const [state, setState] = useState({
  //   language: storeState.language,
  //   LanguageList: storeState.languageList,
  // })

  const language = useSelector((state: any) => state.language.language)
  const languageList = useSelector((state: any) => state.language.languageList)
  const dispatch = useDispatch()

  const token = useSelector((state: any) => state.user?.token)
  const [username, setusernmae] = useState('')

  const shoppingCartItems = useSelector(
    (state: any) => state.shoppingCart.items
  )
  const shoppingCartLoading = useSelector(
    (state: any) => state.shoppingCart.loading
  )

  useEffect(() => {
    if (token) {
      setusernmae(token)
    }
  }, [token])

  //注销
  const onLogout = () => {
    dispatch(userSlice.actions.logOut())
    navigate('/')
    window.location.reload()
  }

  const menuClick = (e: any) => {
    if (e.key == '添加新语言') {
      // const action = {
      //   type: 'add_language',
      //   payload: { coed: 'new_lang', name: '新语言' },
      // }
      const action = addLanguageActionCreator('new_lang', '新语言')
      dispatch(action)
    } else {
      // const action = { type: 'change_language', payload: e.key }
      const action = changeLanguageActionCreator(e.key)
      dispatch(action)
      console.log('e', e)
    }
  }
  const items = [
    { label: `${languageList[0]}`, key: 'item-1' }, // 菜单项务必填写 key
    { label: `${languageList[1]}`, key: 'item-2' },
  ]

  return (
    <div className={styles['app-header']}>
      <div className={styles['top-header']}>
        <div className={styles.inner}>
          <Typography.Text className={styles.DropdownButton}>
            让旅游更幸福
          </Typography.Text>
          <div className={styles.languageDropdownButton}>
            <Menu mode="horizontal">
              <Menu.SubMenu
                key="SubMenu"
                title={language}
                // icon={<DownOutlined />}
              >
                {languageList.map((val: any) => {
                  return (
                    <Menu.Item
                      key={val.name}
                      onClick={(e) => {
                        return menuClick(e)
                      }}
                    >
                      {val.name}
                    </Menu.Item>
                  )
                })}
                <Menu.Item
                  key="添加新语言"
                  onClick={(e) => {
                    return menuClick(e)
                  }}
                >
                  添加新语言
                </Menu.Item>
              </Menu.SubMenu>
            </Menu>
          </div>

          {token ? (
            <Button.Group className={styles['button-group']}>
              <span style={{ marginRight: 20 }}>
                {t('header.welcome')}
                <Typography.Text strong>{username}</Typography.Text>
              </span>
              <Button
                loading={shoppingCartLoading}
                onClick={() => navigate(`/shoppingCart`)}
                icon={<EditOutlined />}
                type="primary"
                shape="round"
              >
                {t('header.shoppingCart')} ({shoppingCartItems?.length})
              </Button>
              <Button
                onClick={onLogout}
                type="primary"
                shape="round"
                style={{ marginLeft: 20 }}
              >
                {t('header.signOut')}
              </Button>
            </Button.Group>
          ) : (
            <Button.Group className={styles['button-group']}>
              <Button
                onClick={() => navigate(`/register`)}
                icon={<EditOutlined />}
                type="primary"
                shape="round"
              >
                注册
              </Button>
              <Button
                onClick={() => navigate(`/login`)}
                icon={<UserOutlined />}
                type="primary"
                shape="round"
                style={{ marginLeft: 20 }}
              >
                登录
              </Button>
            </Button.Group>
          )}
        </div>
      </div>

      <Layout.Header className={styles['main-header']}>
        <span onClick={() => navigate(`/`)}>
          <img src={logo} alt="" className={styles['App-logo']} />
          <Typography.Title level={3} className={styles.title}>
            旅游网
          </Typography.Title>
        </span>
        <Input.Search
          placeholder="请输入您要去的网址"
          className={styles['search-input']}
          onSearch={(keywords) => navigate('/search/' + keywords)}
        ></Input.Search>
      </Layout.Header>

      <Menu mode={'horizontal'} className={styles['main-menu']}>
        <Menu.Item key={1}>{t('header.home_page') as ReactNode}</Menu.Item>
        <Menu.Item key={2}>{t('header.weekend') as ReactNode}</Menu.Item>
        <Menu.Item key={3}>{t('header.group') as ReactNode}</Menu.Item>
        <Menu.Item key="4"> {t('header.backpack') as ReactNode} </Menu.Item>
        <Menu.Item key="5"> {t('header.private') as ReactNode}</Menu.Item>
        <Menu.Item key="6"> {t('header.cruise') as ReactNode} </Menu.Item>
        <Menu.Item key="7"> {t('header.hotel') as ReactNode} </Menu.Item>
        <Menu.Item key="8"> {t('header.local') as ReactNode} </Menu.Item>
        <Menu.Item key="9"> {t('header.theme') as ReactNode} </Menu.Item>
        <Menu.Item key="10"> {t('header.custom') as ReactNode} </Menu.Item>
        <Menu.Item key="11"> {t('header.study') as ReactNode} </Menu.Item>
        <Menu.Item key="12"> {t('header.visa') as ReactNode} </Menu.Item>
        <Menu.Item key="13"> {t('header.enterprise') as ReactNode} </Menu.Item>
        <Menu.Item key="14"> {t('header.high_end') as ReactNode} </Menu.Item>
        <Menu.Item key="15"> {t('header.outdoor') as ReactNode} </Menu.Item>
        <Menu.Item key="16"> {t('header.insurance') as ReactNode} </Menu.Item>
      </Menu>
    </div>
  )
}
